<template>
  <ve-card :title="activedKey == 0 ? record.title : record.typeName">
    <template #operator-left>
      <view v-if="record.userStatus == 0" class="unread-btn">未读</view>
      <view v-else class="read-text">已读</view>
    </template>

    <view class="message">
      <p v-if="activedKey == 0" :class="{ content: activedKey == 1 }" v-html="record.content"></p>
      <p v-else :class="{ content: activedKey == 1 }" v-html="record.title"></p>
    </view>
    <template #footer>
      <view class="card-footer">
        <p class="footer-text">{{ record.sendTime }}</p>
        <ve-button v-if="record.type !== 9 && record.type !== 10" type="plain" size="mini" @click="toDetail(record)">查看详情</ve-button>
      </view>
    </template>
  </ve-card>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { readNotice } from '@/api/info/index'
  import { NoticeTemplates } from '../../../pages/index/noticeNavigate.js'

  defineProps({
    record: {
      type: Object,
    },
    activedKey: {
      type: Number,
      default: 0,
    },
  })
  // 阅读消息
  const readMsg = (id: any) => {
    readNotice({
      id: id,
    }).then((res) => {
      console.log('已读消息')
    })
  }
  const toDetail = (record: any) => {
    console.log(record, 'toDetail')
    if (record.noticeType == 2) {
      uni.navigateTo({
        url: '/pages/info/detail?id=' + record.id,
      })
    } else {
      readMsg(record.id)
      NoticeTemplates(record.type, record.bizDataJson)
    }
  }
</script>

<style lang="less" scoped>
  .unread-btn {
    width: 88rpx;
    height: 48rpx;
    border-radius: 48rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    background: #f9654e;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .read-text {
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC;
    color: #8491a8;
  }
  .card-footer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .footer-text {
      color: #8491a8;
      font-size: 30rpx;
    }
  }
  .message {
    padding: 16rpx 0;
    line-height: 60rpx;
    p {
      white-space: pre-wrap;
      position: relative;
    }
  }
  .content {
    padding: 16rpx 0;
    width: 100%;
    color: #191c27;
    line-height: 60rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
